<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <u-navbar bgColor="#fff" :safeAreaInsetTop="true" :placeholder="true" :fixed="true" 
            @leftClick="back" title="项目管理" rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <uni-select class="uniselect" :style="{top:systemInfo.headerH+'px'}"
            ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select">
        </uni-select>
        <view style="height:74rpx"></view>
  

        <!-- content -->
        <view class="uni-area">
            <!-- 项目统计 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="项目统计"/>
                <view class="u-m-t-20 u-flex u-row-between u-p-l-30">
                    <text>项目总数量</text>
                    <text>{{projectData.total}}个</text>
                </view>
                <view class="u-p-t-20" style="height:520rpx">
                    <qiun-data-charts type="pie" 
                        :tooltipShow="true" tooltipFormat="tooltipDemo1"
                        :opts="projectData.isOpts?projectData.opts:{extra:{pie:{offsetAngle:90}}}" 
                        :chartData="projectData" />
                </view>
            </view>

            <!-- 项目列表 -->
            <view class="u-m-t-50 u-font-32 font-bold">项目列表</view>
            <uni-item-project class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                // 下拉选择数据
				selectData:[
                    { label: "属地", list: [], show: false, type: "districtId", value: '' },
                    { label: "项目类型", list: [], show: false, type: "xmtype", value: '' },
                    { label: "工程进度", list: [], show: false, type: "jsjd", value: '' },
                ],
                // 下拉选择框筛选数据
                projectPrameter:{
                    districtId: '', // 区划值【非必传】
                    xmtype:'', // 项目类型【非必传】 
                    jsjd:'', // 工程进度【非必传】
                },
                projectData:{
                    total: 0,
                    series: [
                    //     {
                    //         data: [
                    //             // { name: "一师", value: 50 }, 
                    //             // { name: "二师", value: 30 }, 
                    //         ],
                    //         format: 'yAxisDemo1', // label式化
                    //     }
                    ],
                    isOpts: false,
                    opts:{
                        extra:{
                            pie:{
                                customRadius: 50,
                                offsetAngle: 90
                            }
                        },
                        legend:{
                            lineHeight: 12,
                            padding: 2,
                            margin: 2
                        }
                    }
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.getProjectList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                this.projectPrameter.districtId = res.value
                // 项目类型
                this.$tools.getProTypeFn(this,res=>{
                    this.selectData.splice(1,1,res)
                    this.projectPrameter.xmtype = res.value
                    // 工程进度
                    this.$tools.getProStatusFn(this,res=>{
                        this.selectData.splice(2,1,res)
                        this.projectPrameter.jsjd = res.value
                        // 项目统计
                        this.getProjectData()
                        // 项目列表
                        this.getProjectList()
                    })
                })
            })
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=project' })
            },


            // 项目统计
            getProjectData(){
                let api 
                if( this.projectPrameter.districtId == 660000 || this.projectPrameter.districtId == '' ){ // 兵团
                    api = this.$apis.pProjectTotal
                }else{ // 师级
                    api = this.$apis.proProjectTotal
                }
                // console.log('项目统计参数',this.projectPrameter)
                this.$request(this,api,this.projectPrameter).then(res=>{
                    // console.log('项目统计',res)
                    this.projectData.total = 0
                    this.projectData.series = [ { data: [], format: 'yAxisDemo1' } ]
                    res.map((v,i)=>{
                        this.projectData.total += Number(v.value)
                    })
                    res.map((v,i)=>{
                        this.projectData.series[0].data.push({
                            name: v.name + ':' + v.value + ' ' + ((v.value/this.projectData.total)*100).toFixed(2)+'%',
                            value: v.value,
                            label: v.name,
                        })
                    })
                    if( this.projectData.series[0].data.length > 6 ){
                        this.projectData.isOpts = true
                    }else{
                        this.projectData.isOpts = false
                    }
                }).then()
            },
            
            
            // 项目列表
            getProjectList(){
                this.page.status = 'loading'
                const prameter = Object.assign(this.projectPrameter,this.paging)
                // console.log('项目列表参数',prameter)
                this.$request(this,this.$apis.proProjectList,prameter).then(res=>{
                    // console.log('项目列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        uni.$u.toast('暂未查询到更多项目相关数据')
                    }
                    if( res.total > 20 ){
                        this.page.status = 'loadmore'
                    }else{
                        this.page.status = 'nomore'
                    }
                }).then()
            },


            // 下拉选择
            select(e){
                this.projectPrameter[e.type] = e.value
                // 项目统计
                this.getProjectData()
                // 项目列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.getProjectList()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .uniselect{
        width: 100%;
        position: fixed !important;
        left: 0;
    }
</style>
